<template>
	<view class="my-style">
		<u-toast ref="uToast"></u-toast>
		<view class="box box-lr box-align-center them-body">
			<image :src="userInfo.avatar" mode="widthFix" style="width: 140rpx;border-radius: 50%;margin-left:10rpx"></image>
			<view v-if="showLogin" style="margin-left: 30rpx; font-size: 40rpx;" @click="openLogin()">立即登录</view>
			<view v-else style="margin-left: 30rpx; display: flex; align-items: center; justify-content: space-between; width: 100%;">
				<view>
					<view style="display: flex;">
						<view style="font-size: 40rpx; font-weight: bold;">{{userInfo.username}}</view>
						<view>
							<u-icon v-if="userInfo.gender==1" name="man" color="#007aff" size="50"></u-icon>
							<u-icon v-else-if="userInfo.gender==2" name="woman" color="#dd524d" size="50"></u-icon>
						</view>
					</view>
					<!-- <view style="font-size: 30rpx;">用户ID：{{userInfo.uuid}}</view> -->
					<view style="font-size: 30rpx;">地区：{{userInfo.region}}</view>
				</view>
				<view style="margin-right: 30rpx;">
					<u-icon name="arrow-right" color="#8d8c8c" size="40" style="margin-left: 10rpx" @click="goToPerson"></u-icon>
				</view>
			</view>
		</view>
		<view class="box  box-align-center box-pack-around them-body" v-if="false">
			<image src="../../static/logo.png" mode="widthFix" style="width: 140rpx;border-radius: 50%;" @click="setUserInfoControl"></image>
			<image src="../../static/logo.png" mode="widthFix" style="width: 140rpx;border-radius: 50%;"></image>
		</view>

		<view class="info_texts">
			<view class="box box-pack-between box-align-center " style="margin-top: 20rpx;">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/familyMembers.png" mode=""></image>
					<view style="margin-left: 30rpx">黑名单</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="40" style="margin-left: 10rpx" @click="goToBlacklist()"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center " style="margin-top: 40rpx;">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/familyMembers.png" mode=""></image>
					<view style="margin-left: 30rpx">测试</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="40" style="margin-left: 10rpx" @click="goToTest()"></u-icon>
				</view>
			</view>


			<uni-popup ref="loginPopup" type="bottom" border-radius="10px 10px 0 0">
				<view style="background-color: #f8f8f8; width: 100%;border-radius: 15rpx;">
					<view style="display: flex; justify-content: flex-end;" @click="closeLogin()">
						<uni-icons type="closeempty" size="25"></uni-icons>
					</view>
					<view style="height: 300rpx; display: flex; justify-content: center; align-items: center;">
						<button type="primary" style="border-radius: 30rpx;" @click="login">{{text}}</button>
					</view>
					<view class="box box-align-center box-pack-center agreement" style="width: 100%;">
						<view>
							<checkbox-group @change="setPolicy">
								<label>
									<checkbox value="cb" :checked="false" />
								</label>
							</checkbox-group>
						</view>
						<view>
							<view>
								登录视为您已同意绑定抖音账号，且代表您已阅读并同意
							</view>
							<view class="agreement_text" @click="gotoTreatys">《用户服务协议》《用户信息授权协议》</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		loginController,
		loginToDeveloperServer
	} from '@/utils/login.js';
	import {
		getUserInfo,
		setUserInfo
	} from '../../api/login';
	export default {
		data() {
			return {
				userInfo: {
					userId: 0,
					uuid: '',
					username: '抖音用户',
					region: '未设置',
					avatar: "https://goeasy-im2-1302606804.cos.ap-guangzhou.myqcloud.com/avatar/avatar.png",
					gender: 0, //用户性别，0: 未知；1:男性；2:女性
					policy: false,
				},
				text: '抖音账号一键登录',
				showLogin: true
			}
		},
		async onLoad() {
			if (this.SystemInfo.uniPlatform == 'mp-weixin') {
				this.userInfo.username = '微信用户'
				this.text = '微信账号一键登录'
			}
			if (uni.getStorageSync("userId")) {
				this.getUserInfos()
			}
		},

		onShow() {
			if (uni.getStorageSync("userId")) {
				this.showLogin = false
				this.getUserInfos()
			} else {
				this.showLogin = true
			}
		},
		methods: {
			openLogin() {
				this.$refs.loginPopup.open('center')
			},
			closeLogin() {
				this.$refs.loginPopup.close()
			},
			gotoTreatys() {
				uni.navigateTo({
					url: '/pages_subpackage/treatys/index'
				})
			},
			setPolicy(e) {
				if (e.detail.value.length > 0) {
					this.policy = true
				} else {
					this.policy = false
				}
			},
			goToPerson() {
				// uni.navigateTo({
				// 	url: '/pages_subpackage/personCenter/index?item=' + encodeURIComponent(JSON.stringify(this
				// 		.userInfo))
				// })

				uni.navigateTo({
					url: '/pages_subpackage/personInfo/index?item=' + encodeURIComponent(JSON.stringify(this
						.userInfo))
				})
			},

			connectionGoEasy(uuid, avatar, nickname) {
				if (this.goEasy.getConnectionStatus() === "disconnected") {
					//建立连接
					this.goEasy.connect({
						id: uuid, //im必填，最大长度60字符
						data: {
							"avatar": avatar,
							"nickname": nickname
						}, //必须是一个对象，im必填，最大长度300字符，显示在会话列表中
						onSuccess: function() { //连接成功
							console.log("GoEasy connect successfully.") //连接成功
						},
						onFailed: function(error) { //连接失败
							console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error
								.content);
						},
						onProgress: function(attempts) { //连接或自动重连中
							console.log("GoEasy is connecting", attempts);
						}
					});
				}
			},

			async login() {
				if (this.policy != true) {
					uni.showToast({
						title: "请先同意协议",
						duration: 1500,
						icon: "none",
					})
					return
				}

				if (this.SystemInfo.uniPlatform == 'mp-weixin') {
					console.log("这是开启登录")
					try {
						await loginController.wxLogin()
						this.showLogin = false
						
					} catch (e) {
						this.showLogin = true
					}
				} else {
					const isDouyinLogin = await loginController.login();
					this.isLogin = isDouyinLogin
					let that = this
					uni.getUserInfo({
						success(res) {
							that.userInfo.username = res.userInfo.nickName
							that.userInfo.avatar = res.userInfo.avatarUrl
							that.userInfo.gender = res.userInfo.gender
							console.log('登录成功', res)
							setUserInfo({
								id: uni.getStorageSync("userId"),
								username: that.userInfo.username,
								avatar: that.userInfo.avatar,
							}).then(res => {
								uni.setStorageSync("userInfo", res.data)
								that.connectionGoEasy(uni.getStorageSync('uuid'), that.userInfo.avatar,
									that.userInfo.username)
								// that.goToPerson()
								console.log("上报成功")
							}).catch(err => {
								console.log("上报失败", err)
							})
						},
						fail(err) {
							console.log('登录失败', err)
						}
					})
				}
				this.closeLogin()
				setTimeout(() => {
					this.getUserInfos()
				}, 1500)
			},

			setUserInfoControl() {
				console.log("这是缓存中id", uni.getStorageSync("userId"))
			},
			goToBlacklist() {
				uni.navigateTo({
					url: '/pages_subpackage/blacklist/index?item=' + encodeURIComponent(JSON.stringify(this
						.userInfo))
				})
			},
			goToTest() {
				uni.navigateTo({
					url: '/pages_subpackage/test/index?item=' + encodeURIComponent(JSON.stringify(this
						.userInfo))
				})
			},
			getUserInfos() {
				getUserInfo({
					id: uni.getStorageSync("userId")
				}).then(res => {
					this.userInfo.userId = res.data.id
					this.userInfo.username = res.data.username
					this.userInfo.region = res.data.region
					this.userInfo.avatar = res.data.avatar
					this.userInfo.gender = res.data.gender
					this.userInfo.uuid = res.data.uuid
					uni.setStorageSync("userInfo", res.data)
					this.connectionGoEasy(this.userInfo.uuid, this.userInfo.avatar, this.userInfo.username)
					console.log('获取个人信息成功', res)
					if (res.data.gender == 0) {
						uni.navigateTo({
							url: '/pages_subpackage/personInfo/index?item=' + encodeURIComponent(JSON.stringify(this
								.userInfo))
						})
					}
				}).catch(err => {
					console.log('获取个人信息失败', err)
					console.log('这是个人id', uni.getStorageSync("userId"))
				})
			}
		}
	}
</script>



<style lang="scss">
	.my-style {
		margin: 20rpx;
	}

	.them-body {
		height: 180rpx;
		margin-bottom: 20rpx;
		background-color: $uni-bg-color;
		border-radius: 25rpx;
	}

	.info_texts {
		padding: 20rpx 40rpx 40rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		image {
			height: 21px;
			width: 20px;
		}

		.farter {
			font-size: 28rpx;
			color: #8d8c8c;
		}
	}

	.agreement {
		font-size: 12px;
		color: #606060;
		padding: 20rpx;
		position: relative;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%, 0);

		.agreement_text {
			color: #1b97ef
		}
	}
</style>